// e.g. mt-20 mr-20 mb-20 ml-20
@margin-sizes: 0 10 20;
@margin-sizes-length: length(@margin-sizes);
.marginLoop(@margin-sizes-length);

.marginLoop(@n, @i: 1) when (@i =< @n) {
    @margin-size: extract(@margin-sizes, @i);
    .mt-@{margin-size} { margin-top: @margin-size+0px  !important; }
    .mr-@{margin-size} { margin-right: @margin-size+0px  !important; }
    .mb-@{margin-size} { margin-bottom: @margin-size+0px  !important; }
    .ml-@{margin-size} { margin-left: @margin-size+0px  !important; }
    .marginLoop(@n, (@i + 1));
}

// e.g. pt-20 pr-20 pb-20 pl-20
@padding-sizes: 0 5 10 20;
@padding-sizes-length: length(@padding-sizes);
.paddingLoop(@padding-sizes-length);

.paddingLoop(@n, @i: 1) when (@i =< @n) {
    @padding-size: extract(@padding-sizes, @i);
    .pt-@{padding-size} { padding-top: @padding-size+0px  !important; }
    .pr-@{padding-size} { padding-right: @padding-size+0px  !important; }
    .pb-@{padding-size} { padding-bottom: @padding-size+0px  !important; }
    .pl-@{padding-size} { padding-left: @padding-size+0px  !important; }
    .paddingLoop(@n, (@i + 1));
}



// e.g. wd-100 wd-150 wd-200
.widthLoop(10);
.widthLoop(@n, @i: 1) when (@i =< @n) {
    @width-size: @i*50+50;
    .wd-@{width-size} { 
        width: @width-size+0px !important;
    }
    .widthLoop(@n, (@i + 1));
}

// 字体粗细
// e.g. font-100 font-200...
.fontLoop(10);
.fontLoop(@n, @i: 1) when (@i =< @n) {
    @font: @i*100;
    .font-@{font} { 
        font-weight: @font !important;
    }
    .fontLoop(@n, (@i + 1));
}


// 浮动
.float-l {
    float: left;
}
.float-r {
    float: right;
}
// .clearfix::after {
//     content:" ";
//     display:block;
//     clear:both;
// }
.text-center {
    text-align: center !important;
}
.text-left {
    text-align: left !important;
}
.text-right {
    text-align: right !important;
}

.font-14 {
    font-size: 14px !important;
}
.font-16 {
    font-size: 16px !important;
}
.font-18 {
    font-size: 18px !important;
}
.font-20 {
    font-size: 20px !important;
}
.font-22 {
    font-size: 22px !important;
}
.font-24 {
    font-size: 24px !important;
}
.font-26 {
    font-size: 26px !important;
}
.font-28 {
    font-size: 28px !important;
}
.font-bold {
    font-weight: bold;
}




// 通用布局
.panel {
    padding: 15px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
